﻿<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Spa Land - Body & Massage Therapy HTML Template | Shop Single </title>

    <!-- Stylesheets -->
    <link href="/css/bootstrap.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/responsive.css" rel="stylesheet">

    <!--Color Switcher Mockup-->
    <link href="/css/color-switcher-design.css" rel="stylesheet">

    <!--Color Themes-->
    <link id="theme-color-file" href="/css/color-themes/default-theme.css" rel="stylesheet">

    <!--Favicon-->
    <link rel="shortcut icon" href="/images/favicon.png" type="image/x-icon">
    <link rel="icon" href="/images/favicon.png" type="image/x-icon">

    <!-- Responsive -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!--[if lt IE 9]>
    <script src="/https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
    <!--[if lt IE 9]>
    <script src="/js/respond.js"></script><![endif]-->
</head>

<body>
<div class="page-wrapper">

    <!-- Preloader -->
    <div class="preloader"></div>

    <!-- Main Header-->
    <header class="main-header header-style-three">

        <!--Header Top-->
        <div th:insert="~{header :: #header-top}"></div>
        <!-- End Header Top -->

        <!-- Header Lower -->
        <div class="header-lower">
            <div class="auto-container">
                <div th:insert="~{header :: #main-box}"></div>
            </div>
        </div>
        <!-- End Header Lower -->

        <!--Sticky Header-->
        <div th:insert="~{header :: #header-sticky}"></div>
        <!--End Sticky Header-->
    </header>
    <!--End Main Header -->

    <!--Page Title-->
    <section class="page-title" style="background-image:url(/images/background/13.jpg);">
        <div class="auto-container">
            <div class="inner-container clearfix">
                <h1>Checkout</h1>
                <ul class="bread-crumb clearfix">
                    <li><a href="index.html">Home </a></li>
                    <li>购物车结算</li>
                </ul>
            </div>
        </div>
    </section>
    <!--End Page Title-->

    <!--CheckOut Page-->
    <div class="checkout-page">
        <div class="auto-container">
            <!--Checkout Details-->
            <form method="post" action="/page/paySuccessPage">
                <div class="checkout-form">

                    <div class="row clearfix">
                        <!--Column-->
                        <div class="column col-md-6 col-sm-12 col-xs-12">
                            <div class="sec-title">
                                <h3>订单明细</h3>
                            </div>

                            <div class="row clearfix">

                                <!--Form Group-->
                                <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                    <div class="field-label">收件人： <sup>*</sup></div>
                                    <input type="text" name="reciver" value="" placeholder="">
                                </div>

                                <!--Form Group-->
                                <div class="form-group col-md-6 col-sm-6 col-xs-12">
                                    <div class="field-label">邮箱地址</div>
                                    <input type="text" name="email" value="" placeholder="">
                                </div>

                                <!--Form Group-->
                                <div class="form-group col-md-6 col-sm-6 col-xs-12">
                                    <div class="field-label">手机号码</div>
                                    <input type="text" name="phone" value="" placeholder="">
                                </div>

                                <!--Form Group-->
                                <div class="form-group col-md-6 col-sm-6 col-xs-12">
                                    <div class="field-label">邮件编码</div>
                                    <input type="text" name="code" value="" placeholder="">
                                </div>

                                <!--Form Group-->
                                <div class="form-group col-md-6 col-sm-6 col-xs-12">
                                    <div class="field-label">省份 <sup>*</sup></div>
                                    <input type="text" name="sheng" value="" placeholder="">
                                </div>

                                <div class="form-group col-md-6 col-sm-6 col-xs-12">
                                    <div class="field-label">城市</div>
                                    <input type="text" name="shi" value="" placeholder="">
                                </div>

                                <!--Form Group-->
                                <div class="form-group col-md-6 col-sm-6 col-xs-12">
                                    <div class="field-label">区/县</div>
                                    <input type="text" name="qu" value="" placeholder="">
                                </div>


                                <!--Form Group-->
                                <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                    <div class="field-label">详细地址</div>
                                    <input type="text" name="addressDetail" value="" placeholder="Street address">
                                </div>

                                <!--Form Group-->
                                <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                    <div class="field-label">公司名称</div>
                                    <input type="text" name="companyName" value="" placeholder="">
                                </div>

                                <!--Form Group-->
                                <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                    <div class="field-label">公司地址</div>
                                    <input type="text" name="companyAddress" value="" placeholder="Street address">
                                </div>

                            </div>
                        </div>

                    </div>

                </div>
                <!--End Checkout Details-->

                <!--Order Box-->
                <div class="order-box">
                    <div class="sec-title">
                        <h2>您的订单</h2>
                    </div>
                    <div class="title-box clearfix">
                        <div class="col">产品名称</div>
                        <div class="col">图片</div>
                        <div class="col">数量</div>
                        <div class="col">单价</div>
                        <div class="col">总价</div>
                    </div>
                    <ul>
                        <li class="clearfix" th:each="order:${cartPageInfo.list}">
                            <span style="float: left; width: 140px; line-height: 200px;" th:text="${order.productName}"></span>
                            <span style="float: left; width: 208px; line-height: 200px;">
                                <img style="height: 200px;width: 200px;" th:src="'http://47.94.10.67/images/' + ${order.productImg}" alt="">
                            </span>
                            <span style="float: left; width: 228px; line-height: 200px;margin-left: 106px;" th:text="${order.quantity}"></span>
                            <span style="float: left; width: 207px; line-height: 200px;" th:text="${order.productPrice}"></span>
                            <span style="float: left; width: 218px; line-height: 200px; " th:text="${order.productTotalPrice}"> </span>
                        </li>

                        <li class="clearfix">运费<span class="free">免费送货上门</span></li>
                        <li class="clearfix" th:text="${totalPrice}">总计<span></span></li>
                    </ul>
                </div>
                <!--End Order Box-->

                <!--Payment Box-->
                <div class="payment-box">
                    <div class="upper-box">

                        <!--Payment Options-->
                        <div class="payment-options">
                            <ul>
                                <li>
                                    <div class="radio-option">
                                        <input type="radio" name="payment-group" id="payment-2" checked="">
                                        <label for="payment-2"><strong><font style="vertical-align: inherit;"><font
                                                style="vertical-align: inherit;">直接银行转帐</font></font></strong><span
                                                class="small-text"><font style="vertical-align: inherit;"><font
                                                style="vertical-align: inherit;">将您的付款直接存入我们的银行帐户。</font><font
                                                style="vertical-align: inherit;">请使用您的订单ID作为付款参考。</font><font
                                                style="vertical-align: inherit;">在我们的帐户中清算资金之前，您的订单将不会发货。</font></font></span></label>
                                    </div>
                                </li>
                                <li>
                                    <div class="radio-option">
                                        <input type="radio" name="payment-group" id="payment-1">
                                        <label for="payment-1"><strong><font style="vertical-align: inherit;"><font
                                                style="vertical-align: inherit;">支票付款</font></font></strong><span
                                                class="small-text"><font style="vertical-align: inherit;"><font
                                                style="vertical-align: inherit;">将付款直接存入我们的银行帐户。</font><font
                                                style="vertical-align: inherit;">请使用您的订单ID作为付款参考。</font><font
                                                style="vertical-align: inherit;">在我们的帐户中清算资金之前，您的订单将不会发货。</font></font></span></label>
                                    </div>
                                </li>

                                <li>
                                    <div class="radio-option">
                                        <input type="radio" name="payment-group" id="payment-3">
                                        <label for="payment-3"><strong><font style="vertical-align: inherit;"><font
                                                style="vertical-align: inherit;">货到付款</font></font></strong><span
                                                class="small-text"><font style="vertical-align: inherit;"><font
                                                style="vertical-align: inherit;">将付款直接存入我们的银行帐户。</font><font
                                                style="vertical-align: inherit;">请使用您的订单ID作为付款参考。</font><font
                                                style="vertical-align: inherit;">在我们的帐户中清算资金之前，您的订单将不会发货。</font></font></span></label>
                                    </div>
                                </li>
                                <li>
                                    <div class="radio-option">
                                        <input type="radio" name="payment-group" id="payment-4">
                                        <label for="payment-4"><strong><font style="vertical-align: inherit;"><font
                                                style="vertical-align: inherit;">PayPal</font></font></strong><span
                                                class="image"><img src="/images/resource/paypal.jpg"
                                                                   alt=""></span></label>
                                        <a href="#" class="what-paypall"><font style="vertical-align: inherit;"><font
                                                style="vertical-align: inherit;">什么是PayPal？</font></font></a>
                                    </div>
                                </li>
                            </ul>
                        </div>

                    </div>
                    <div class="lower-box text-right">
                        <button href="#" class="theme-btn btn-style-six"><font style="vertical-align: inherit;"><font
                                style="vertical-align: inherit;">立即支付</font></font></button>
                    </div>
                </div>
                <!--End Payment Box-->
            </form>
        </div>
    </div>
    <!--End CheckOut Page-->

    <!-- Main Footer -->
    <div th:insert="~{footer :: #footer}"></div>
    <!-- End Main Footer -->

</div>
<!--End pagewrapper-->

<div class="color-palate">
    <div class="color-trigger">
        <i class="fa fa-gear"></i>
    </div>
    <div class="color-palate-head">
        <h6>选择一个你喜欢的主题</h6>
    </div>
    <div class="various-color clearfix">
        <div class="colors-list">
            <span class="palate default-color active" data-theme-file="/css/color-themes/default-theme.css"></span>
            <span class="palate teal-color" data-theme-file="/css/color-themes/teal-theme.css"></span>
            <span class="palate navy-color" data-theme-file="/css/color-themes/navy-theme.css"></span>
            <span class="palate yellow-color" data-theme-file="/css/color-themes/yellow-theme.css"></span>
            <span class="palate blue-color" data-theme-file="/css/color-themes/blue-theme.css"></span>
            <span class="palate purple-color" data-theme-file="/css/color-themes/purple-theme.css"></span>
            <span class="palate olive-color" data-theme-file="/css/color-themes/olive-theme.css"></span>
            <span class="palate red-color" data-theme-file="/css/color-themes/red-theme.css"></span>
        </div>
    </div>

    <div class="palate-foo">
        <span>你可以很简单的改变主体颜色</span>
    </div>

</div>
<!-- /.End Of Color Palate -->
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<!--End Revolution Slider-->
<script src="/js/jquery-ui.js"></script>
<script src="/js/jquery.fancybox.js"></script>
<script src="/js/owl.js"></script>
<script src="/js/appear.js"></script>
<script src="/js/wow.js"></script>
<script src="/js/mixitup.js"></script>
<script src="/js/jquery.bootstrap-touchspin.js"></script>
<script src="/js/validate.js"></script>
<script src="/js/script.js"></script>
<!--Color Switcher-->
<script src="/js/color-settings.js"></script>
</body>
</html>
<script type="text/javascript">
    function searchService() {
        var question = $("#q").val().trim();
        window.location.href = '/gallery/searchGallery?question=' + question;
    }
</script>